<template>
  <div class="home-container">
    <div class="table-page-search-wrapper">
      <a-row type="flex" justify="space-between" align="middle">
        <a-col :span="12">
          <a-form layout="inline" :model="listQuery">
            <a-form-item label="菜单名称">
              <a-input v-model:value="listQuery.title" placeholder="请输入菜单名称" />
            </a-form-item>
            <a-form-item>
              <a-button type="primary" @click="searchSubmit"> 搜索 </a-button>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :span="12">
          <div style="margin-right: 0px; float: right; display: flex; align-item: center">
            <a-tooltip placement="top">
              <template #title>
                <span>刷新列表</span>
              </template>
              <a-button @click="reloadList">
                <template #icon><SyncOutlined /></template>
              </a-button>
            </a-tooltip>
            <a-button
              v-permission="{ action: 'menu_add' }"
              type="primary"
              style="margin-left: 12px"
              @click="addNewData"
            >
              <template #icon><PlusOutlined /></template> 新增菜单
            </a-button>
          </div>
        </a-col>
      </a-row>
    </div>
    <a-table
      :columns="columns"
      :rowKey="(record) => record.id"
      :dataSource="treeData"
      :loading="loading"
      :pagination="false"
      @change="handleTableChange"
    >
      <template #status="{ text: record }">
        <a-tag v-if="record == 1" color="blue">正常</a-tag>
        <a-tag v-if="record == -1" color="red">禁用</a-tag>
        <a-tag v-if="record == 2" color="orange">开发版</a-tag>
        <a-tag v-if="record == 3" color="cyan">内测版</a-tag>
      </template>
      <template #action="{ text: record }">
        <a v-permission="{ action: 'menu_add' }" @click="menu_edit(record)"
          ><EditOutlined /> 编辑</a
        >
        <a
          v-permission="{ action: 'menu_add' }"
          style="margin-left: 10px"
          @click="menu_add(record.id)"
          ><PlusCircleOutlined /> 增加子菜单
        </a>
        <a-divider v-permission="{ action: 'menu_ext' }" type="vertical" />
        <a-dropdown>
          <a v-permission="{ action: 'menu_ext' }" class="ant-dropdown-link">
            更多 <DownOutlined
          /></a>
          <template #overlay>
            <a-menu>
              <a-menu-item v-permission="{ action: 'menu_copy' }">
                <a @click="menu_copy(record)"><CopyOutlined /> 复用</a>
              </a-menu-item>
              <a-menu-item v-permission="{ action: 'menu_del' }" style="color: red">
                <a @click="menu_delete(record)"><DeleteOutlined /> 删除</a>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </template>
    </a-table>
    <a-modal
      v-model:open="visible"
      :confirmLoading="confirmLoading"
      :title="operateTitle"
      style="top: 20px"
      :width="800"
      okText="提交"
      @ok="handleOk"
      @cancel="reloadList"
    >
      <a-form ref="formRef" :model="modalFormRef">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="上级菜单"
          has-feedback
          required
          name="pid"
          v-bind="validateInfos.pid"
        >
          <a-select v-model:value="modalFormRef.pid" placeholder="请选择上级菜单">
            <a-select-option :key="0" :value="0">顶级菜单</a-select-option>
            <a-select-option v-for="d in allMenuData" :key="d.id" :value="d.id">
              {{ d.spl }} {{ d.title }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="菜单名称"
          has-feedback
          required
          name="title"
          v-bind="validateInfos.title"
        >
          <a-input v-model:value="modalFormRef.title" placeholder="请输入菜单名称" />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="标识(唯一)"
          has-feedback
          required
          name="pageTag"
          v-bind="validateInfos.pageTag"
        >
          <a-input v-model:value="modalFormRef.pageTag" placeholder="请输入标识(唯一)" />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="页面路径"
          has-feedback
          name="filePath"
        >
          <a-input v-model:value="modalFormRef.filePath" placeholder="不写则以标识为准" />
        </a-form-item>
        <!-- <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="组件"
          has-feedback
          name="component"
        >
          <a-select v-model:value="modalFormRef.component" placeholder="请选择">
            <a-select-option key="" value="">无</a-select-option>
            <a-select-option key="PageView" value="PageView">页面组件</a-select-option>
            <a-select-option key="RouteView" value="RouteView">路由组件</a-select-option>
          </a-select>
        </a-form-item> -->
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="菜单图标"
          has-feedback
          name="icon"
        >
          <a-row :gutter="6" align="middle">
            <a-col :span="12">
              <a-input v-model:value="modalFormRef.icon" placeholder="" />
            </a-col>
            <a-col :span="12">
              <icon-font
                v-if="modalFormRef.icon"
                :type="'anticon-' + modalFormRef.icon"
                size="30"
              />
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="重定向(跳转)"
          has-feedback
          name="redirect"
        >
          <a-input v-model:value="modalFormRef.redirect" placeholder="" />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="接口地址"
          has-feedback
          name="actionUrl"
        >
          <a-textarea
            v-model:value="modalFormRef.actionUrl"
            :rows="4"
            placeholder="如：api/roles/index"
          />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="使用帮助"
          has-feedback
          name="helpUrl"
        >
          <a-textarea
            v-model:value="modalFormRef.helpUrl"
            :rows="2"
            placeholder="如：https://doc.21ds.cn/detail?doc=4731341806141859/4937381422523920"
          />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="排序"
          has-feedback
          required
          name="sort"
          v-bind="validateInfos.sort"
        >
          <a-input v-model:value="modalFormRef.sort" placeholder="请输入序号(值越小越靠前)" />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="隐藏下级子菜单"
          has-feedback
          required
          name="hideChildrenInMenu"
          v-bind="validateInfos.hideChildrenInMenu"
        >
          <a-radio-group v-model:value="modalFormRef.hideChildrenInMenu" name="hideChildrenInMenu">
            <a-radio :key="1" :value="1">隐藏</a-radio>
            <a-radio :key="0" :value="0">不隐藏</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="隐藏本菜单"
          has-feedback
          required
          name="hidden"
          v-bind="validateInfos.hidden"
        >
          <a-radio-group v-model:value="modalFormRef.hidden" name="hidden">
            <a-radio :key="1" :value="1">隐藏</a-radio>
            <a-radio :key="0" :value="0">不隐藏</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="菜单类型"
          has-feedback
          required
          name="type"
          v-bind="validateInfos.type"
        >
          <a-radio-group v-model:value="modalFormRef.type" name="type">
            <a-radio :key="1" :value="1">目录</a-radio>
            <a-radio :key="2" :value="2">菜单</a-radio>
            <a-radio :key="3" :value="3">操作</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="状态"
          has-feedback
          required
          name="status"
          v-bind="validateInfos.status"
        >
          <a-radio-group v-model:value="modalFormRef.status" name="status">
            <a-radio :key="-1" :value="-1">禁用</a-radio>
            <a-radio :key="1" :value="1">正常</a-radio>
            <a-radio :key="2" :value="2">开发版</a-radio>
            <a-radio :key="3" :value="3">内测版</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, ref, toRaw } from 'vue'
import { Row, Col, Divider, Modal, Form } from 'ant-design-vue'
import {
  SyncOutlined,
  PlusOutlined,
  EditOutlined,
  PlusCircleOutlined,
  CopyOutlined,
  DownOutlined,
  DeleteOutlined
} from '@ant-design/icons-vue'
import { requestSuccess, requestFailed } from '@/utils/feedback'
import { validateZhengshu } from '@/utils/validate'
import { getMenuList, getMenuWithLevel, doMenuEdit, doMenuDel } from '@/api/manage'
import { hasPermission } from '@/utils/permission/hasPermission'

export default defineComponent({
  name: 'MenuList',
  components: {
    SyncOutlined,
    PlusOutlined,
    EditOutlined,
    DownOutlined,
    PlusCircleOutlined,
    CopyOutlined,
    DeleteOutlined,
    [Row.name]: Row,
    [Col.name]: Col,
    [Divider.name]: Divider
  },
  setup() {
    const formRef = ref()
    const state = reactive({
      loading: false,
      treeData: [],
      state: {
        smsSendBtn: false,
        time: 60
      },
      allMenuData: [],
      visible: false,
      confirmLoading: false,
      searchType: '0',
      searchTitle: '',
      operateTitle: '编辑',
      listQuery: {
        type: '0',
        pageNo: 1,
        pageSize: 15,
        title: ''
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 }
      },
      columns: [
        {
          title: '菜单名',
          dataIndex: 'title'
        },
        {
          title: '标识',
          dataIndex: 'pageTag'
        },
        {
          title: '排序',
          dataIndex: 'sort'
        },
        {
          title: '状态',
          dataIndex: 'status',
          slots: { customRender: 'status' }
        },
        {
          title: '操作',
          width: '250px',
          slots: { customRender: 'action' }
        }
      ]
    })
    const modalFormRef = reactive({
      id: '0',
      pid: 0,
      title: '',
      pageTag: '',
      component: '',
      helpUrl: '',
      icon: '',
      redirect: '',
      actionUrl: '',
      sort: '',
      hideChildrenInMenu: '',
      hidden: '',
      type: '',
      operate_type: 'edit',
      status: '',
      filePath: ''
    })
    const modalRule = reactive({
      id: [
        {
          required: false,
          trigger: ['blur', 'change']
        }
      ],
      pid: [
        {
          required: true,
          type: 'number',
          message: '请选择上级菜单',
          trigger: ['blur', 'change']
        }
      ],
      title: [
        {
          required: true,
          message: '请输入菜单名',
          trigger: ['blur', 'change']
        }
      ],
      pageTag: [
        {
          required: true,
          message: '请输入标识',
          trigger: ['blur', 'change']
        }
      ],
      sort: [
        {
          required: true,
          validator: validateZhengshu,
          trigger: ['blur', 'change']
        }
      ],
      status: [
        { required: true, message: '请选择状态', trigger: ['blur', 'change'], type: 'number' }
      ],
      type: [
        {
          required: true,
          message: '请选择菜单类型',
          type: 'number',
          trigger: ['blur', 'change']
        }
      ],
      hidden: [
        {
          required: true,
          message: '请选择此项',
          type: 'number',
          trigger: ['blur', 'change']
        }
      ],
      hideChildrenInMenu: [
        {
          required: true,
          message: '请选择此项',
          type: 'number',
          trigger: ['blur', 'change']
        }
      ]
    })
    const { resetFields, validate, validateInfos } = Form.useForm(modalFormRef, modalRule)
    onMounted(() => {
      getDataList()
    })

    function handleTableChange(e) {
      state.loading = true
      state.listQuery.pageSize = e.pageSize
      state.listQuery.pageNo = e.current
      getDataList()
    }

    function reloadList() {
      state.loading = true
      state.listQuery.pageNo = 1
      getDataList()
    }

    function searchSubmit() {
      state.loading = true
      state.listQuery.pageNo = 1
      getDataList()
    }

    function getDataList() {
      getMenuList(state.listQuery).then((res) => {
        state.loading = false
        state.treeData = res
      })
    }

    function menu_edit(itemData) {
      state.operateTitle = '编辑菜单'
      modalFormRef.operate_type = 'edit'
      getMenuWithLevel(state.listQuery).then((res) => {
        state.allMenuData = res
      })
      state.visible = true
      resetFields()
      if (itemData !== undefined && itemData) {
        for (let item in itemData) {
          modalFormRef[item] = itemData[item]
        }
        modalFormRef.operate_type = 'edit'
      }
    }
    function menu_copy(itemData) {
      state.operateTitle = '复制菜单'
      modalFormRef.operate_type = 'add'
      getMenuWithLevel(state.listQuery).then((res) => {
        state.allMenuData = res
      })
      state.visible = true
      resetFields()
      if (itemData !== undefined && itemData) {
        for (let item in itemData) {
          modalFormRef[item] = itemData[item]
        }
        modalFormRef.id = '0'
      }
    }
    function addNewData() {
      state.operateTitle = '新增菜单'
      modalFormRef.operate_type = 'add'
      state.visible = true
      getMenuWithLevel(state.listQuery).then((res) => {
        state.allMenuData = res
      })
      resetFields()
    }
    function menu_add(itemData) {
      state.operateTitle = '新增子菜单'
      modalFormRef.operate_type = 'add'
      state.visible = true
      getMenuWithLevel(state.listQuery).then((res) => {
        state.allMenuData = res
      })
      resetFields()
      if (itemData !== undefined && itemData) {
        modalFormRef.pid = parseInt(itemData)
      }
    }
    function menu_delete(data) {
      Modal.confirm({
        title: '确认删除菜单?',
        content: '【' + data.title + '】',
        okType: 'danger',
        okText: '确认删除',
        onOk() {
          doMenuDel({ id: data.id }).then((res) => {
            if (res.code === 200) {
              state.loading = true
              getDataList()
              requestSuccess(res)
            } else {
              requestFailed(res)
            }
          })
        }
      })
    }
    function handleOk() {
      validate()
        .then(() => {
          let formRaw = toRaw(modalFormRef)
          state.confirmLoading = true
          if (modalFormRef.operate_type === 'edit') {
            doMenuEdit(formRaw).then((res) => {
              state.confirmLoading = false
              if (res.code === 200) {
                state.visible = false
                reloadList()
                requestSuccess(res)
              } else {
                requestFailed(res)
              }
            })
          } else if (modalFormRef.operate_type === 'add') {
            doMenuEdit(formRaw).then((res) => {
              state.confirmLoading = false
              if (res.code === 200) {
                state.visible = false
                requestSuccess(res)
                reloadList()
              } else {
                requestFailed(res)
              }
            })
          }
        })
        .catch(() => {
          return false
        })
    }
    return {
      ...toRefs(state),
      handleTableChange,
      reloadList,
      searchSubmit,
      menu_delete,
      formRef,
      modalRule,
      addNewData,
      menu_edit,
      modalFormRef,
      validateInfos,
      hasPermission,
      menu_add,
      menu_copy,
      handleOk,
      getDataList
    }
  }
})
</script>

<style scoped></style>
